﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>

    <!-- 引入第三方Easyui插件库 -->
    <link href="resources/jqueryEasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="resources/jqueryEasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="resources/jqueryEasyUI/themes/color.css" rel="stylesheet" type="text/css" />
    <script src="resources/jqueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <style type="text/css">
        .refreshBtn {
            float: right;
            margin-right: 10px;
        }

        .title {
            color: Red;
        }

        input[type="text"] {
            width: 77px;
        }

        .easyui-tabs .tabs-inner {
            padding: 20px 6px !important;
            line-height: 16px !important;
            height: auto !important;
        }

            .easyui-tabs .tabs-inner .tabs-title {
                white-space: normal;
            }

            .easyui-tabs .tabs-inner .tabs-with-icon {
                padding-left: 0px;
            }

            .easyui-tabs .tabs-inner .tabs-icon {
                left: 5px;
                top: 13%;
            }
    </style>
</head>
<body onload="init();">
    <div id="map">
    </div>
	  <div id="editGeomStyle" class="easyui-window" data-options="title:'要素样式',closed:false,maximizable:false,minimizable:false,closable:false,resizable:false,shadow:false"
         style="width: 310px; padding: 5px; left: 60px; top: 20px;">
        <div id="tt" class="easyui-tabs" data-options="headerWidth:26,tabPosition:'left',plain:true,border:true" style="width: 100%">
            <div title="点要素样式" data-options="iconCls:'icon-point'" style="padding: 10px;">
                <fieldset id="layer0">
                    <input id="refresh-points" class="refreshBtn" type="button" value="更新" /><br />
                    <!-- 图形样式设置 -->
                    <label class="title">图形样式：</label><br />
                    <label>点大小(radius):</label>
                    <input type="text" value="10" id="points-size" /><br />
                    <label>填充颜色(color):</label>
                    <input type="text" value="#aa3300" id="points-fill-color" /><br />
                    <label>边框样式(color):</label>
                    <input type="text" value="red" id="points-stroke-color" /><br />
                    <label>边框样式(width):</label>
                    <input type="text" value="2" id="points-stroke-width" /><br />
                    <!-- 文字样式设置 -->
                    <label class="title">文字样式：</label><br />
                    <label>位置(align): </label>
                    <select id="points-text-align">
                        <option value="center" selected="selected">Center</option>
                        <option value="end">End</option>
                        <option value="left">Left</option>
                        <option value="right">Right</option>
                        <option value="start">Start</option>
                    </select>
                    <br />
                    <label>基线(baseline): </label>
                    <select id="points-text-baseline">
                        <option value="alphabetic">Alphabetic</option>
                        <option value="bottom">Bottom</option>
                        <option value="hanging">Hanging</option>
                        <option value="ideographic">Ideographic</option>
                        <option value="middle" selected="selected">Middle</option>
                        <option value="top">Top</option>
                    </select>
                    <br />
                    <label>旋转角度(rotation): </label>
                    <select id="points-text-rotation">
                        <option value="0">0°</option>
                        <option value="0.785398164">45°</option>
                        <option value="1.570796327">90°</option>
                    </select>
                    <br />
                    <label>字体(font): </label>
                    <select id="points-text-font">
                        <option value="Arial" selected="selected">Arial</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Quattrocento Sans">Quattrocento</option>
                        <option value="Verdana">Verdana</option>
                    </select>
                    <br />
                    <label>字体粗细(weight): </label>
                    <select id="points-text-weight">
                        <option value="bold">Bold</option>
                        <option value="normal" selected="selected">Normal</option>
                    </select>
                    <br />
                    <label>字体大小(size): </label>
                    <input type="text" value="12px" id="points-text-size" />
                    <br />
                    <label>X偏移量(offset x):</label>
                    <input type="text" value="0" id="points-text-offset-x" />
                    <br />
                    <label>Y偏移量(offset y):</label>
                    <input type="text" value="0" id="points-text-offset-y" />
                    <br />
                    <label>字体颜色(color):</label>
                    <input type="text" value="blue" id="points-text-color" />
                    <br />
                    <label title="Outline Color">文字外框颜色(O.Color):</label>
                    <input type="text" value="#ffffff" id="points-text-outline-color" />
                    <br />
                    <label title="Outline Width">文字外框宽度(O.Width):</label>
                    <input type="text" value="3" id="points-text-outline-width" />
                </fieldset>
            </div>
            <div title="线要素样式" data-options="iconCls:'icon-line'" style="padding: 10px;">
                <fieldset id="layer1">
                    <input id="refresh-lines" class="refreshBtn" type="button" value="更新" /><br />
                    <label class="title">图形样式：</label><br />
                    <label>线颜色(color):</label>
                    <input type="text" value="green" id="lines-stroke-color" /><br />
                    <label>线宽(width):</label>
                    <input type="text" value="2" id="lines-stroke-width" /><br />
                    <!-- 文字样式设置 -->
                    <label class="title">文字样式：</label><br />
                    <label>位置(align): </label>
                    <select id="lines-text-align">
                        <option value="center" selected="selected">Center</option>
                        <option value="end">End</option>
                        <option value="left">Left</option>
                        <option value="right">Right</option>
                        <option value="start">Start</option>
                    </select>
                    <br />
                    <label>基线(baseline): </label>
                    <select id="lines-text-baseline">
                        <option value="alphabetic">Alphabetic</option>
                        <option value="bottom">Bottom</option>
                        <option value="hanging">Hanging</option>
                        <option value="ideographic">Ideographic</option>
                        <option value="middle" selected="selected">Middle</option>
                        <option value="top">Top</option>
                    </select>
                    <br />
                    <label>旋转角度(rotation): </label>
                    <select id="lines-text-rotation">
                        <option value="0">0°</option>
                        <option value="0.785398164">45°</option>
                        <option value="1.570796327">90°</option>
                    </select>
                    <br />
                    <label>字体(font): </label>
                    <select id="lines-text-font">
                        <option value="Arial" selected="selected">Arial</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Quattrocento Sans">Quattrocento</option>
                        <option value="Verdana">Verdana</option>
                    </select>
                    <br />
                    <label>字体粗细(weight): </label>
                    <select id="lines-text-weight">
                        <option value="bold">Bold</option>
                        <option value="normal" selected="selected">Normal</option>
                    </select>
                    <br />
                    <label>字体大小(size): </label>
                    <input type="text" value="12px" id="lines-text-size" />
                    <br />
                    <label>X偏移量(offset x):</label>
                    <input type="text" value="0" id="lines-text-offset-x" />
                    <br />
                    <label>Y偏移量(offset y):</label>
                    <input type="text" value="0" id="lines-text-offset-y" />
                    <br />
                    <label>字体颜色(color):</label>
                    <input type="text" value="blue" id="lines-text-color" />
                    <br />
                    <label title="Outline Color">文字外框颜色(O.Color):</label>
                    <input type="text" value="#ffffff" id="lines-text-outline-color" />
                    <br />
                    <label title="Outline Width">文字外框宽度(O.Width):</label>
                    <input type="text" value="3" id="lines-text-outline-width" />
                </fieldset>
            </div>
            <div title="区要素样式" data-options="iconCls:'icon-polygon'" style="padding: 10px;">
                <fieldset id="layer2">
                    <input id="refresh-polygons" class="refreshBtn" type="button" value="更新" /><br />
                    <label class="title">图形样式：</label><br />
                    <label>填充颜色(color):</label>
                    <input type="text" value="rgba(255, 255, 255, 0.5)" id="polygons-fill-color" /><br />
                    <label>边框颜色(color):</label>
                    <input type="text" value="#ffcc33" id="polygons-stroke-color" /><br />
                    <label>边框宽度(width):</label>
                    <input type="text" value="2" id="polygons-stroke-width" /><br />
                    <!-- 文字样式设置 -->
                    <label class="title">文字样式：</label><br />
                    <label>位置(align): </label>
                    <select id="polygons-text-align">
                        <option value="center" selected="selected">Center</option>
                        <option value="end">End</option>
                        <option value="left">Left</option>
                        <option value="right">Right</option>
                        <option value="start">Start</option>
                    </select>
                    <br />
                    <label>基线(baseline): </label>
                    <select id="polygons-text-baseline">
                        <option value="alphabetic">Alphabetic</option>
                        <option value="bottom">Bottom</option>
                        <option value="hanging">Hanging</option>
                        <option value="ideographic">Ideographic</option>
                        <option value="middle" selected="selected">Middle</option>
                        <option value="top">Top</option>
                    </select>
                    <br />
                    <label>旋转角度(rotation): </label>
                    <select id="polygons-text-rotation">
                        <option value="0">0°</option>
                        <option value="0.785398164">45°</option>
                        <option value="1.570796327">90°</option>
                    </select>
                    <br />
                    <label>字体(font): </label>
                    <select id="polygons-text-font">
                        <option value="Arial" selected="selected">Arial</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Quattrocento Sans">Quattrocento</option>
                        <option value="Verdana">Verdana</option>
                    </select>
                    <br />
                    <label>字体粗细(weight): </label>
                    <select id="polygons-text-weight">
                        <option value="bold">Bold</option>
                        <option value="normal" selected="selected">Normal</option>
                    </select>
                    <br />
                    <label>字体大小(size): </label>
                    <input type="text" value="12px" id="polygons-text-size" />
                    <br />
                    <label>X偏移量(offset x):</label>
                    <input type="text" value="0" id="polygons-text-offset-x" />
                    <br />
                    <label>Y偏移量(offset y):</label>
                    <input type="text" value="0" id="polygons-text-offset-y" />
                    <br />
                    <label>字体颜色(color):</label>
                    <input type="text" value="blue" id="polygons-text-color" />
                    <br />
                    <label title="Outline Color">文字外框颜色(O.Color):</label>
                    <input type="text" value="#ffffff" id="polygons-text-outline-color" />
                    <br />
                    <label title="Outline Width">文字外框宽度(O.Width):</label>
                    <input type="text" value="3" id="polygons-text-outline-width" />
                </fieldset>
            </div>
        </div>
    </div>
	
    <script type="text/javascript">
     
              var vectorPoints, vectorLines, vectorPolygons;
        var pointFeature, lineFeature, polygonFeature;
        var myDom;

        function init() {
           var map= initMap();

            //绘制的几何图形要素
            pointFeature = new ol.Feature({
                geometry: new ol.geom.Point([0, 0]),
                name: 'Point Feature'
            });
            lineFeature = new ol.Feature({
                geometry: new ol.geom.LineString([[1, 1], [2, 2]]),
                name: 'Line Feature'
            });
            polygonFeature = new ol.Feature({
                geometry: new ol.geom.Polygon([[[3, 3], [4, 4], [4, 3], [3, 3]]]),
                name: 'Polygon Feature'
            });

            //点、线、区样式对象
            myDom = {
                points: {
                    align: document.getElementById('points-text-align'),
                    baseline: document.getElementById('points-text-baseline'),
                    rotation: document.getElementById('points-text-rotation'),
                    font: document.getElementById('points-text-font'),
                    weight: document.getElementById('points-text-weight'),
                    size: document.getElementById('points-text-size'),
                    offsetX: document.getElementById('points-text-offset-x'),
                    offsetY: document.getElementById('points-text-offset-y'),
                    color: document.getElementById('points-text-color'),
                    outlineColor: document.getElementById('points-text-outline-color'),
                    outlineWidth: document.getElementById('points-text-outline-width')
                },
                lines: {
                    align: document.getElementById('lines-text-align'),
                    baseline: document.getElementById('lines-text-baseline'),
                    rotation: document.getElementById('lines-text-rotation'),
                    font: document.getElementById('lines-text-font'),
                    weight: document.getElementById('lines-text-weight'),
                    size: document.getElementById('lines-text-size'),
                    offsetX: document.getElementById('lines-text-offset-x'),
                    offsetY: document.getElementById('lines-text-offset-y'),
                    color: document.getElementById('lines-text-color'),
                    outlineColor: document.getElementById('lines-text-outline-color'),
                    outlineWidth: document.getElementById('lines-text-outline-width')
                },
                polygons: {
                    align: document.getElementById('polygons-text-align'),
                    baseline: document.getElementById('polygons-text-baseline'),
                    rotation: document.getElementById('polygons-text-rotation'),
                    font: document.getElementById('polygons-text-font'),
                    weight: document.getElementById('polygons-text-weight'),
                    size: document.getElementById('polygons-text-size'),
                    offsetX: document.getElementById('polygons-text-offset-x'),
                    offsetY: document.getElementById('polygons-text-offset-y'),
                    color: document.getElementById('polygons-text-color'),
                    outlineColor: document.getElementById('polygons-text-outline-color'),
                    outlineWidth: document.getElementById('polygons-text-outline-width')
                }
            };

            //分别实例化点、线、区图层对象
            vectorPoints = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [pointFeature]
                }),
                style: createPointStyleFunction()
            });

            vectorLines = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [lineFeature]
                }),
                style: createLineStyleFunction()
            });
            vectorPolygons = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [polygonFeature]
                }),
                style: createPolygonStyleFunction()
            });
			
            map.addLayer(vectorPoints);
            map.addLayer(vectorLines);
            map.addLayer(vectorPolygons);

            //点、线、区的更新按钮处理函数
            $('#refresh-points').click(function () {
                vectorPoints.setStyle(createPointStyleFunction(pointFeature));
            });
            $('#refresh-lines').click(function () {
                vectorLines.setStyle(createLineStyleFunction(lineFeature));
            });
            $('#refresh-polygons').click(function () {
                vectorPolygons.setStyle(createPolygonStyleFunction(polygonFeature));
            });
        }

        /**
        * 创建文本样式函数
        * @param {ol.Feature} feature 要素
        * @param  dom 要素样式html对象
        */
        var createTextStyle = function (feature, dom) {
            //读取当前面板设置的样式值
            //文本位置
            var align = dom.align.value;
            //基准线
            var baseline = dom.baseline.value;
            //字体大小
            var size = dom.size.value;
            //偏移量X
            var offsetX = parseInt(dom.offsetX.value, 10);
            //偏移量Y
            var offsetY = parseInt(dom.offsetY.value, 10);
            //字体粗细
            var weight = dom.weight.value;
            //角度
            var rotation = parseFloat(dom.rotation.value);
            //文字样式（粗细、大小、字体）
            var font = weight + ' ' + size + ' ' + dom.font.value;
            //字体颜色
            var fillColor = dom.color.value;
            //外框颜色
            var outlineColor = dom.outlineColor.value;
            //外框宽度
            var outlineWidth = parseInt(dom.outlineWidth.value, 10);

            //返回实例化的文本样式对象（ol.style.Text）
            return new ol.style.Text({
                //位置
                textAlign: align,
                //基准线
                textBaseline: baseline,
                //文字样式
                font: font,
                //文本内容
                text: feature.get('name'),
                //文本填充样式（即文字颜色）
                fill: new ol.style.Fill({ color: fillColor }),
                //文本外框样式（颜色与宽度）
                stroke: new ol.style.Stroke({ color: outlineColor, width: outlineWidth }),
                //偏移量X
                offsetX: offsetX,
                //偏移量Y
                offsetY: offsetY,
                //角度
                rotation: rotation
            });
        };
        /**
        * 创建点要素样式函数
        * @param {ol.Feature} feature 点要素
        */
        var createPointStyleFunction = function () {
            var radius = document.getElementById('points-size').value;
            var fillColor = document.getElementById('points-fill-color').value;
            var strokeColor = document.getElementById('points-stroke-color').value;
            var strokeWidth = document.getElementById('points-stroke-width').value;

            return function (feature, resolution) {
                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: radius,
                        fill: new ol.style.Fill({ color: fillColor }),
                        stroke: new ol.style.Stroke({ color: strokeColor, width: strokeWidth })
                    }),
                    text: createTextStyle(feature, myDom.points)
                });
                return [style];
            };
        };
        /**
        * 创建线要素样式函数
        * @param {ol.Feature} feature 线要素
        */
        var createLineStyleFunction = function () {
            var strokeColor = document.getElementById('lines-stroke-color').value;
            var strokeWidth = document.getElementById('lines-stroke-width').value;
            return function (feature, resolution) {
                var style = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: strokeColor,
                        width: strokeWidth
                    }),
                    text: createTextStyle(feature, myDom.lines)
                });
                return [style];
            };
        };
        /**
        * 创建区要素样式函数
        * @param {ol.Feature} feature 区要素
        */
        var createPolygonStyleFunction = function () {
            var fillColor = document.getElementById('polygons-fill-color').value;
            var strokeColor = document.getElementById('polygons-stroke-color').value;
            var strokeWidth = document.getElementById('polygons-stroke-width').value;

            return function (feature, resolution) {
                var style = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: strokeColor,
                        width: strokeWidth
                    }),
                    fill: new ol.style.Fill({
                        color: fillColor
                    }),
                    text: createTextStyle(feature, myDom.polygons)
                });
                return [style];
            };
        };
        
    </script>
</body>
</html>
